<p>This rule raises an issue when CSS uses transform properties to restrict content to a specific orientation (portrait or landscape only).</p>
<h2>Why is this an issue?</h2>
<p>Restricting page orientation using CSS transforms creates accessibility barriers for users who cannot rotate their devices or prefer a specific
orientation.</p>
<p>Some users have their devices mounted in a fixed position, use assistive technologies that work better in certain orientations, or have physical
limitations that make device rotation difficult or impossible. When CSS forces content into a single orientation, these users may be unable to access
or properly view the content.</p>
<p>The Web Content Accessibility Guidelines (WCAG) 2.2 require that content should be viewable in both portrait and landscape orientations unless a
specific orientation is essential for the content to function properly. Using CSS transforms to lock orientation violates this principle and can make
websites unusable for people with disabilities.</p>
<p>Additionally, orientation restrictions can negatively impact the user experience for all users, as they may prefer to use their device in a
particular orientation based on comfort, context, or personal preference.</p>
<h3>What is the potential impact?</h3>
<p>Users with disabilities or device constraints may be completely unable to access content, violating accessibility standards and potentially
excluding a significant portion of your audience. This can also lead to legal compliance issues under accessibility regulations.</p>
<h2>How to fix it</h2>
<p>Remove CSS transforms that force specific orientations. Instead, use responsive design techniques that adapt content to different screen sizes and
orientations naturally.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
/* Forces landscape orientation */
@media screen and (orientation: portrait) {
  body {
    transform: rotate(90deg); /* Noncompliant */
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
  }
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
/* Responsive design that works in both orientations */
@media screen and (orientation: portrait) {
  .content {
    flex-direction: column;
    padding: 1rem;
  }
}

@media screen and (orientation: landscape) {
  .content {
    flex-direction: row;
    padding: 2rem;
  }
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> WCAG 2.2 - Orientation - <a href="https://www.w3.org/TR/WCAG22/#orientation">Web Content Accessibility Guidelines on orientation
  requirements</a> </li>
  <li> ACT Rules - CSS Orientation Lock - <a href="https://act-rules.github.io/rules/b33eff">Accessibility Conformance Testing rules for CSS
  orientation restrictions</a> </li>
  <li> Deque University - CSS Orientation Lock - <a href="https://dequeuniversity.com/rules/axe/4.10/css-orientation-lock">Detailed explanation of CSS
  orientation lock accessibility issues</a> </li>
  <li> MDN - CSS Media Queries - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">Guide to using CSS media queries for
  responsive design</a> </li>
</ul>
<h3>Standards</h3>
<ul>
  <li> WCAG 2.2 - 1.3.4 Orientation (AA) - <a href="https://www.w3.org/TR/WCAG22/#orientation">Content does not restrict its view and operation to a
  single display orientation</a> </li>
</ul>
